// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// 
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// 
//     http://www.apache.org/licenses/LICENSE-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

$line-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cline x1='2' y1='12' x2='22' y2='12' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
$rect-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
$ellipse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='10' ry='10' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
$move-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L8 6h8L12 2zM12 22l4-4h-8l4 4zM2 12l4-4v8L2 12zM22 12l-4 4V8l4 4z' fill='black'/%3E%3C/svg%3E");
// $move-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2 2h-4l2-2zM12 22l2-2h-4l2 2zM2 12l2-2v4l-2-2zM22 12l-2-2v4l2-2z' fill='black'/%3E%3C/svg%3E");
$rotate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M12 4V2C6.48 2 2 6.48 2 12h2c0-4.42 3.58-8 8-8zm0 16c-4.42 0-8-3.58-8-8H2c0 5.52 4.48 10 10 10v-2zm0-14V4c4.42 0 8 3.58 8 8h2c0-5.52-4.48-10-10-10zm0 16v2c5.52 0 10-4.48 10-10h-2c0 4.42-3.58 8-8 8z' fill='black'/%3E%3C/svg%3E");
// $rotate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M12 4V2C6.48 2 2 6.48 2 12h2c0-4.41 3.59-8 8-8zm0 14c-3.31 0-6-2.69-6-6H4c0 4.41 3.59 8 8 8v-2zm0-12V4c4.41 0 8 3.59 8 8h2c0-5.52-4.48-10-10-10zm0 14v2c5.52 0 10-4.48 10-10h-2c0 4.41-3.59 8-8 8z' fill='black'/%3E%3C/svg%3E");
$zoom-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='7' stroke='black' stroke-width='2' fill='none'/%3E%3Cline x1='15' y1='15' x2='20' y2='20' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
$copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='12' height='12' stroke='black' stroke-width='2' fill='none'/%3E%3Cpath d='M8 8h12v12H8V8z' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
$delete-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z' fill='black'/%3E%3C/svg%3E");
$fill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -3 24 24'%3E%3Cpath d='M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z' fill='black'/%3E%3C/svg%3E");

.toolkit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;

  .shape,
  .operation {
    display: flex;
    gap: 8px;
  }

  input[type='radio'] {
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }

  label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: background-color 0.2s;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }

  label:has(input[type='radio']:checked) {
    background-color: rgba(0, 0, 0, 0.2);
  }

  label.line {
    background-image: $line-icon;
  }

  label.rect {
    background-image: $rect-icon;
  }

  label.ellipse {
    background-image: $ellipse-icon;
  }

  label.move {
    background-image: $move-icon;
  }

  label.rotate {
    background-image: $rotate-icon;
  }

  label.zoom {
    background-image: $zoom-icon;
  }

  label.copy {
    background-image: $copy-icon;
  }

  label.delete {
    background-image: $delete-icon;
  }

  label.fill {
    background-image: $fill-icon;
  }

  &:has(input[type='radio'][value='move']:checked) + .canvas > * {
    cursor: $move-icon 16 16, auto;
  }

  &:has(input[type='radio'][value='zoom']:checked) + .canvas > * {
    cursor: $zoom-icon 16 16, auto;
  }

  &:has(input[type='radio'][value='rotate']:checked) + .canvas > * {
    cursor: $rotate-icon 16 16, auto;
  }

  &:has(input[type='radio'][value='copy']:checked) + .canvas > * {
    cursor: $copy-icon 16 16, auto;
  }

  &:has(input[type='radio'][value='delete']:checked) + .canvas > * {
    cursor: $delete-icon 16 16, auto;
  }

  &:has(input[type='radio'][value='fill']:checked) + .canvas > * {
    cursor: $fill-icon 16 16, auto;
  }
}
